<template>
	<view class="app app-bg">
		<!-- 页面内容开始 -->
		<view class="card" v-if="pageIndex === 0">

			<view>{{$t('setting.please-enter')}} {{ $fn.hidden(form1.oldEmail, 2, 9) }} {{ $t('setting.email-verification-code') }}</view>

			<u-form-item prop="oldEmailCode">
				<u-input v-model="form1.oldEmailCode" type="text" :placeholder="$t('setting.please-enter-email-verification-code')" :focus="focus.oldEmailCode"/>
				<vk-data-verification-code ref="oldEmailCode" mode="custom" seconds="60" slot="right" type="unbind" custom-style="font-size:24rpx;color:#606266" @send="sendCode(1)" />
			</u-form-item>

			<view class="btn" @click="next(1)">{{ $t('setting.next-step') }}</view>
		</view>

		<view class="card" v-else-if="pageIndex === 1">
			<u-form-item prop="email">
				<u-input v-model="form1.email" type="text" :placeholder="$t('setting.please-enter-the-email-number')" :focus="focus.email"/>
			</u-form-item>
			<u-form-item prop="code">
				<u-input v-model="form1.code" type="number" :placeholder="$t('setting.please-enter-email-verification-code')" :focus="focus.emailCode"/>
				<vk-data-verification-code ref="emailCode" mode="custom" seconds="60" slot="right" type="bind" custom-style="font-size:24rpx;color:#606266" @send="sendCode(2)"/>
			</u-form-item>
			<view class="btn" @click="bindEmail">{{ $t('system.confirm') }}</view>
		</view>
		<!-- 页面内容结束 -->
	</view>
</template>

<script>
	var vk = uni.vk;			// vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				pageIndex:0,
				// init请求返回的数据
				data:{

				},
				// 表单请求数据
				form1:{
					oldEmail:"",
					oldEmailCode:"",
					email:"",
					code:""
				},
				focus:{
					oldEmailCode:false,
					emailCode:false,
					email:false
				},
				scrollTop:0,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options){
				let that = this;
				if (options.pageIndex) {
					that.pageIndex = Number(options.pageIndex) || 0;
				}
				uni.setNavigationBarTitle({
					title: that.pageIndex === 0 ? that.$t('page.modify-mailbox') : that.$t('page.bind-mailbox')
				});
				that.form1.oldEmail = vk.getVuex("$user.userInfo.email");
			},
			pageTo(path){
				vk.navigateTo(path);
			},
			next(pageIndex){
				let that = this;
				if (!that.form1.oldEmailCode) {
					vk.toast(that.$t('setting.please-enter-the-verification-code'));
					that.focus.oldEmailCode = true;
					return false;
				}
				setTimeout(() => {
					that.pageIndex = pageIndex;
					setTimeout(() => {
						that.$refs.emailCode.reset(that.$t('setting.get-verification-code'));
					}, 100);
				}, 300);
			},
			// 绑定邮箱
			bindEmail(){
				let that = this;
				if (!vk.pubfn.test(that.form1.email,"email")) {
					vk.toast(that.$t('setting.please-enter-the-correct-mailbox'));
					that.focus.email = true;
					return false;
				}
				if (!that.form1.code) {
					vk.toast(that.$t('setting.please-enter-the-verification-code'));
					that.focus.emailCode = true;
					return false;
				}
				if (that.options.pageIndex === "1") {
					// 绑定
					vk.userCenter.bindEmail({
						data:that.form1,
						success:(data)=>{
							vk.alert(that.$t('setting.binding-succeeded'),()=>{
								vk.navigateBack();
							});
						}
					});
				} else {
					// 换绑
					vk.userCenter.bindNewEmail({
						data:that.form1,
						success:(data)=>{
							vk.alert(that.$t('setting.bind-change-succeeded'),()=>{
								vk.navigateBack();
							});
						}
					});
				}
			},
			// 发送旧邮箱验证码
			sendCode(mode){
				let that = this;
				let email;
				let ref;
				let type;
				if (mode == 1) {
					email = that.form1.oldEmail;
					ref = "oldEmailCode";
					type = "unbind";
				} else {
					email = that.form1.email;
					ref = "emailCode";
					type = "bind";
				}
				if (!vk.pubfn.test(email,"email")) {
					vk.toast(that.$t('setting.please-enter-the-correct-mailbox'));
					return false;
				}
				vk.showLoading(that.$t('system.loading'));
				try {
					uniCloud.callFunction({
						name:"send-mail",
						data:{
							email,
							type
						},
						success:(res)=>{
							let data = res.result;
							if (data.code === 0){
								that.$refs[ref].start();
							} else {
								vk.alert(data.msg);
							}
						},
						complete:()=>{
							vk.hideLoading();
						}
					});
				}catch(err){
					console.error(err)
					vk.hideLoading();
				}
			}
		},
		// 监听器
		watch:{

		},
		// 计算属性
		computed:{

		}
	}
</script>
<style lang="scss" scoped>
	.card{
		padding: 30rpx;
		background-color: #ffffff;
	}
	.btn{
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		height: 70rpx;
		margin: 40rpx auto;
		background-color: var(--main);
		border-radius: 70rpx;
		box-shadow: 0 10rpx 10rpx var(--main);
	}
	.btn:active{
		filter: grayscale(50%);
	}
	.center{
		display: flex;justify-content: center;align-items: center;
	}

</style>
